<template>
  <div class="waterDistributionPlans">
    <TitleColumn name="配水方案列表" />
    <div class="content">
      <div class="search">
        <span class="title">方案名称：</span>
        <a-input-search
          v-model:value="state.searchValue"
          placeholder="请输入方案名称"
          style="width: 250px"
          @search="onSearch"
        />
      </div>
      <ul class="list">
        <li class="listItem" v-for="(item, index) in 20" :key="index">
          <h3 class="title"><i class="icon"></i><strong>方案{{item}}</strong></h3>
          <section>
            <p>关联方案： <span>0618-1配置内容信息，</span></p>
            <p>开始时间： <span>2024-05-31 09:20:31</span></p>
            <p>结束时间： <span>2024-05-31 10:20:31</span></p>
          </section>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';
  import TitleColumn from '@/components/TitleColumn';

  defineOptions({ name: 'WaterDistributionPlans' });

  const state = reactive({
    searchValue: '',
  });

  const onSearch = () => {
    console.log('object');
  }
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .waterDistributionPlans {
    width: 100%;
    height: 100%;
    .content {
      width: 100%;
      height: 100%;
      padding: 10px 14px 10px 0;
      overflow: hidden;
      position: relative;
      display: flex;
      flex-direction: column;
      background: #02123433;
      backdrop-filter: blur(10px);
      .search {
        display: flex;
        align-items: center;
        height: 50px;
        .title {
          color: #B4DFFF;
        }
        ::v-deep(.ant-input) {
          background: #0028517A;
          border: 1px solid;
          border-image: linear-gradient(181deg, rgba(6, 183, 253, 0.4) 3.03%, #51FBFF 47.23%, rgba(6, 183, 253, 0.4) 91.41%);
          border-image-slice: 1;
          box-shadow: 0px 0px 6.92px 0px #06B7FD inset;
          color: #B4DFFF;
        }
        ::v-deep(.ant-input-search-button) {
          background: linear-gradient(180deg, rgba(0, 40, 81, 0.6) -10.87%, rgba(2, 110, 194, 0.6) 80.43%);
          border: 1px solid;
          border-image: linear-gradient(90deg, rgba(220, 237, 255, 0.32) 0%, #DCEDFF 45.95%, rgba(220, 237, 255, 0.32) 95.89%);
          border-image-slice: 1;
          box-shadow: 0px 0px 16px 0px #06B7FD inset;
          backdrop-filter: blur(4px);
          svg {
            color: #fff;
          }
        }
      }
      ul.list {
        width: 100%;
        height: calc(100% - 100px);
        overflow: hidden;
        overflow-y: auto;
        &::-webkit-scrollbar {
          width: 0;
          height: 0;
        }
        li.listItem {
          width: 100%;
          display: flex;
          flex-direction: column;
          margin-bottom: 10px;
          h3.title {
            display: flex;
            align-items: center;
            i.icon {
              width: 26px;
              height: 26px;
              display: inline-block;
              background: url(./images/icon.png) no-repeat;
              background-size: contain;
              margin-top: 6px;
            }
            strong {
              color: #fff;
              font-style: italic;
            }
          }
          section {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            height: 40px;
            position: relative;
            padding: 0 10px;
            cursor: pointer;
            background: linear-gradient(84.22deg, rgba(2, 110, 194, 0.26) 36.82%, rgba(6, 183, 253, 0) 86.31%);
            &::before {
              content: '';
              display: inline-block;
              width: calc(100% + 20px);
              height: 100%;
              background: url(./images/bg.png) no-repeat;
              background-size: 100% 100%;
              position: absolute;
              left: -10px;
            }
            &::after {
              content: '';
              display: inline-block;
              width: calc(100% + 20px);
              height: 2px;
              background: url(./images/line.png) no-repeat;
              background-size: 100% 100%;
              position: absolute;
              bottom: -4px;
              left: -10px;
            }
            &:hover {
              background: linear-gradient(0deg, #06B7FD -17.86%, rgba(6, 183, 253, 0) 100%);
              p {
                color: #51FBFF;
              }
            }
            p {
              color: #fff;
              font-size: 13px;
            }
          }
        }
      }
    }
  }
</style>
